<template>
  <div>

    <div class="table-page-search-wrapper">
      <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
        <z-form-item :datas="fieldArr" :form="queryParam" :gutter="8" :toggle="toggleSearchStatus">
          <a-col :span="4" slot="submit-action">
            <a-space :size="4">
              <a-button type="primary" @click="onQuery" icon="search">查询</a-button>
              <a-button @click="onResetForm" icon="reload">重置</a-button>
            </a-space>
          </a-col>
        </z-form-item>
      </a-form-model>
    </div>
    <!--    <div class="table-operator">-->
    <!--      <a-button type="primary" @click="readAll" icon="book">全部标注已读</a-button>-->
    <!--    </div>-->
    <div>
      <a-alert type="info" :showIcon="true">
        <div slot="message">
          累计待办事项数量<span style="color:#1890FF;"> {{ count.countBacklog }} </span>项，
          其中已完成事项<span style="color:#1890FF;"> {{ count.tobeCompleted }} </span>项，
          未完成事项<span style="color:#1890FF;"> {{ count.completed }} </span>项，
          收到督办通知<span style="color:#1890FF;"> {{ count.notice }} </span>条，
          红牌督办<span style="color:#1890FF;"> {{ count.redCard }} </span>条，
          黄牌督办<span style="color:#1890FF;"> {{ count.yellowCard }} </span>条
          普通督办<span style="color:#1890FF;"> {{ count.commonCard }} </span>条，
          待办事项完成率<span style="color:#1890FF;"> {{ count.yesFeedbook }} </span> ，
        </div>
      </a-alert>
    </div>

    <z-table
      ref="table"
      :showAlert="false"
      :showSelection="false"
      rowKey="id"
      :columns="columns"
      :dataSource="pageData"
      :pagination="pageFilter"
      :loading="loading"
      @change="onTableChange">
      <span slot="action" slot-scope="text, record">
        <a>查看</a>
        <a-divider type="vertical" v-if="record.supervisWhether === 2"/>
        <a v-if="record.supervisWhether === 2" @click="showAnnouncement(record,'1')">反馈</a>
        <!--        <a v-else @click="showAnnouncement(record,2)">编辑</a>-->
      </span>
    </z-table>
    <ShowAnnouncementM ref="ShowAnnouncement"></ShowAnnouncementM>
    <dynamic-notice ref="showDynamNotice" :path="openPath" :formData="formData"/>
  </div>
</template>

<script>
import {getAction} from '@/api/manage'
import ShowAnnouncementM from "@views/system/ShowAnnouncementM";
import DynamicNotice from '../../components/tools/DynamicNotice'
import {listFor, listForm} from "@views/sjsk/modules/list";
import {backlogListCount} from "@api/sjsk/specialist";

export default {
  /**
   * system
   */
  name: "UserAnnouncementList",
  mixins: [listFor, listForm],
  components: {
    DynamicNotice,
    ShowAnnouncementM
  },
  data() {
    return {
      fieldArr: [
        {
          label: '完成情况',
          prop: 'completeStart',
          tagType: 'dict-select',
          span: 5,
          dictOptions: [{text: '未完成', value: '1'}, {text: '已完成', value: '2'}]
        },
        {
          label: '是否督办',
          prop: 'supervisWhether',
          tagType: 'dict-select',
          span: 5,
          dictOptions: [{text: '是', value: '2'}, {text: '否', value: '1'}]
        },
        {
          label: '督办类型',
          prop: 'supervisType',
          tagType: 'dict-select',
          span: 5,
          dictOptions: [{text: '普通督办', value: '1'}, {text: '黄牌督办', value: '2'}, {text: '红牌督办', value: '3'}]
        },
        {label: '开始时间', prop: 'createTime', tagType: 'date-picker', span: 5, format: 'YYYY-MM-DD'}
      ],
      description: '系统通告表管理页面',
      queryParam: {
        // personnelId:1
      },
      count: {},
      columns: [
        {
          title: '事件详情',
          align: "center",
          dataIndex: 'materDatails',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        }, {
          title: '业务类型',
          align: "center",
          dataIndex: 'materType',
          customRender: text => {
            return this.$filterDictTextByCache('service_type', text)}
        }, {
          title: '发布人',
          align: "center",
          dataIndex: 'issuer',
        }, {
          title: '开始时间',
          align: "center",
          dataIndex: 'createTime'
        }, {
          title: '完成截至时间',
          align: "center",
          dataIndex: 'stopTime'
        }, {
          title: '完成时间',
          align: "center",
          dataIndex: 'completionTime',

        }, {
          title: '完成情况',
          align: "center",
          dataIndex: 'completeStart',
          customRender: function (text) {
            if (text === 2) {
              return "已完成";
            } else if (text === 1) {
              return "未完成";
            } else {
              return text;
            }
          }
        }, {
          title: '是否督办',
          align: "center",
          dataIndex: 'supervisWhether',
          // scopedSlots: {customRender: 'supervisWhether'},
          customRender: text => {
            if(text === 1){
              return '否'
            } else if (text === 2){
              return '是'
            }
          }
        }, {
          title: '督办类型',
          align: "center",
          dataIndex: 'supervisType',
          customRender: function (text) {
            if (text == 0) {
              return "未逾期";
            } else if (text == 1) {
              return "普通督办";
            } else if (text == 2) {
              return "黄牌督办";
            } else if (text == 3) {
              return "红牌督办";
            } else {
              return text;
            }
          }
        }, {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: {customRender: 'action'},
        }
      ],
      url: {
        // list: "/sys/sysAnnouncementSend/getMyAnnouncementSend",
        list: "/sjsk-administrator-service/sjsk/supervise/getBcaklogWorklist",
        editCementSend: "sys/sysAnnouncementSend/editByAnntIdAndUserId",
        readAllMsg: "sys/sysAnnouncementSend/readAll",
      },
      loading: false,
      openPath: '',
      formData: ''
    }
  },
  async mounted() {
    this.onQuery()
    this.getSuperviseCount()
  },
  methods: {
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = {currentPage: 'pageNo'}
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length <= 0
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.queryParam = {}
      this.refreshTable()
    },
    getSuperviseCount() {
      backlogListCount().then(ser => {
        console.log(ser)
        this.count = ser.result
        console.log(this.count)
      }).catch(err => {
        console.log(err)
      })
    },
    handleDetail: function (record) {
      this.$refs.sysAnnouncementModal.detail(record);
      this.$refs.sysAnnouncementModal.title = "查看";
    },
    showAnnouncement(record, tit) {
      this.$refs.ShowAnnouncement.detail(record, tit);
    },
    syncHeadNotic(anntId) {
      getAction("sys/annountCement/syncNotic", {anntId: anntId})
    },

    onQuery() {
      this.pageFilter.pageNo = 1
      console.log(this.form)
      this.refreshTable()
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.queryParam)
        } else {
          return false
        }
      })
    },
    refreshTable() {
      let form = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      getAction(this.url.list, form).then((res) => {
        if (res.success) {
          this.getSuperviseCount()
          this.pageData = res.result;
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    // readAll(){
    //   var that = this;
    //   that.$confirm({
    //     title:"确认操作",
    //     content:"是否全部标注已读?",
    //     onOk: function(){
    //       putAction(that.url.readAllMsg).then((res)=>{
    //         if(res.success){
    //           that.$message.success(res.message);
    //           that.loadData();
    //           that.syncHeadNotic();
    //         }
    //       });
    //     }
    //   });
    // },
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}

.anty-row-operator button {
  margin: 0 5px
}

.ant-btn-danger {
  background-color: #ffffff
}

.ant-modal-cust-warp {
  height: 100%
}

.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto
}

.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden
}
</style>